﻿<template>
  <div  style="width:100%;height:100%">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购管理</el-breadcrumb-item>
      <el-breadcrumb-item>采购单添加</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="width:50%;height:85%;background-color:#fff;margin:0 auto;padding-left: 40px">
      <h3 style="padding-top:15px;">添加采购单</h3>
      <!-- 分割线 -->
       <!-- <el-divider direction="horizontal"></el-divider> -->
    <!-- <el-form style="width:80%;height:90%"  label-position="top" :model="itemInfo"> -->
    <el-form :inline="true" :model="itemInfo" label-position="top"  style="width:90%;">
    <el-form-item label="采购单号" prop="list_number" style="width:48%">
    <el-input v-model="itemInfo.list_number"></el-input>
    </el-form-item>
    <el-form-item label="采购时间" prop="entry_date" style="width:48%;margin-left:6px">
      <el-input  v-model="itemInfo.entry_date"></el-input>
    </el-form-item>
    </el-form>
    <el-form style="width:90%;"  label-position="top" :model="itemInfo">
    <el-form-item label="采购总价值" prop="total_price">
      <el-input  v-model="itemInfo.total_price"></el-input>
    </el-form-item>
    <el-form-item label="采购负责人" prop="head">
      <!-- <el-input v-model="itemInfo.company"> -->
        <el-select style="width:100%;" v-model="itemInfo.head"  size="normal"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      <!-- <el-select v-model="itemInfo.company" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select> -->
      <!-- </el-input> -->
    </el-form-item>
    <el-form-item label="备注" prop="remarks">
      <el-input type="textarea" v-model="itemInfo.remarks"></el-input>
      
    </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer" style="width:90%">
    <el-button type="primary" style="width:90%" @click="dialogVisable = true">添加</el-button>
  </span>
    </div>
  <el-dialog
   title=""
   :visible.sync="dialogVisable"
   width="40%"
   style="margin-top:100px"
   >
   <div style="height:100px;text-align:center"><span style="color:rgb(102,177,255);font-size:40px;"> 添加成功！</span></div>
   
  
   </el-dialog>

    
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
       dialogVisable:false,
        itemInfo:{
        category_name:'',
      },

 addForm: {
          list_number: 1,
          entry_date: '',
          total_price: '',
          head: '',
          remarks:'',
        },
         rules: {
          list_number: [
            { required: true, message: '请输入采购单号', trigger: 'blur' },
            {  max: 8, message: '长度为 8 个字符', trigger: 'blur' }
          ],
         entry_date:[
            { required: true, message: '请输入采购时间', trigger: 'blur' },
            { min: 8, max: 10, message: '长度在 8 到 10 个字符', trigger: 'blur' }
          ],
        total_price:[
            { required: true, message: '请输入采购总价格', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          head:[
            { required: true, message: '请输入采购负责人', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ],
          remarks:[
            {required:true,}
          ],

         },
      options: [{
          value: '选项1',
          label: '王鹏'
        }, {
          value: '选项2',
          label: '李爽'
        }, {
          value: '选项3',
          label: '虎妞'
        }, {
          value: '选项4',
          label: '十九'
        }, {
          value: '选项5',
          label: '晶晶'
        }],
        value: '',
        value1:'',
    };
  },
  watch: {},
  computed: {},
  methods: {
    onSubmit(form){
      this.$refs[form].validate(async (valid) => {
          if (!valid) return ;
          const{data:res} = await this.$http.get('',) 
          if(data.meta.status !== 200){
            return this.$message.error('错误请稍后再试')
          }
          this.$message.success("员工添加成功")
          
        });

    },

  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.wrapper{}
</style>
